<!--  -->
<template>
    <div class="body">
        <slot name="search" :searchSubmit="search" :params="params"></slot>
        <div class="buttons">
            <slot name="buttons" :handleDeleteAll="handleDeleteAll"></slot>
        </div>
        <el-table class="eltable" v-loading="loading" @selection-change="handleSelectionChange" :data="state.list"
            style="width: 100%">
            <el-table-column type="selection" width="40" />
            <el-table-column v-for="column in props.columns" :prop="column.prop" :label="column.label"
                v-bind="column?.attrs">
                <template v-if="column.slot" #default="scope">
                    <slot :name="column.prop" :handleDelete="handleDelete" :scope="scope" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page" v-model:current-page="params.page" v-model:page-size="params.psize"
            :page-sizes="[10, 30, 50, 100, 300]" background layout="total, sizes, prev, pager, next, jumper"
            :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>
</template>

<script lang='ts' setup>

import { reactive, defineProps, ref, onMounted} from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const props = withDefaults(defineProps<TableType>(), {
    tableData: () => () => { },
    delete: () => () => { },
    deleteAll: () => () => { },
    columns: () => [],
   
}
)
type TableColumnType = {
    prop: string;
    label: string;
    attrs?: any;
    slot?: boolean;

};
export type TableType = {
    tableData: Function;
    delete?: Function;
    deleteAll?: Function;
    columns: TableColumnType[];

};

const params = reactive<any>({
    page: 1,
    psize: 10
})

const loading = ref(true);

//表格数据
const state = reactive({
    total: 0,
    list: []
})
//请求表格数据
const getData = async () => {

    loading.value = true;
    const res: any = await props.tableData(params).catch(() => { });
    if (res.errCode === 10000) {
        state.list = res.data.list;
        state.total = res.data.counts;
    }
    loading.value = false;


}
const search = () => {
    params.page = 1;
    getData();
}
//每页显示条数改变
const handleSizeChange = (val: number) => {
    params.psize = val;
    getData();
}
//当前页改变
const handleCurrentChange = (val: number) => {
    params.page = val;
    getData();
}

//多选
const selectionRows = ref<Array<any>>([]);
const handleSelectionChange = (val: Array<any>) => {
    selectionRows.value = val;

}
const handleDelete = async (id: number) => {
    //提示确认删除
    const confirm = await ElMessageBox.confirm('是否删除该条记录?').catch(() => { });
    if (!confirm) return;
    alert(id);
    const res: any = await props.delete(id);
    if (res.errCode === 10000) {
        getData();
    }

}
//批量删除
const handleDeleteAll = async () => {
    //提示确认删除
    if (!selectionRows.value.length) {
        ElMessage.error('请选择要删除数据');
        return;
    }
    const confirm = await ElMessageBox.confirm('是否删除选中的记录?').catch(() => { });
    if (!confirm) return;
    const ids = selectionRows.value.map(item => item.id);
    const res: any = await props.deleteAll(ids);
    if (res.errCode === 10000) {
        getData();
    }
}
onMounted(() => {
    getData();
})
</script>
<style scoped lang="less">
.body{
    padding: 0px 20px;
    box-sizing: border-box;
}
.title {
    margin-bottom: 20px;
}
.eltable{
    margin-top: 10px;
}
.page {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
</style>